<template>
  <div
    class="w-full h-full text-[#333] overflow-hidden flex flex-col justify-between p-[15px] pt-0 box-border"
  >
    <el-tabs class="basis-tabs" v-model="state.tabActive">
      <el-tab-pane label="基本资料" name="base">
        <el-scrollbar always class="w-full h-full overflow-hidden">
          <section class="grid grid-cols-3 gap-x-[20px]">
            <article class="border">
              <ul>
                <!-- <li class="border-bottom flex">
                  <div class="label">客服头像</div>
                  <div class="flex-1 w-0 flex justify-center p-[6px]">
                    <upload-img
                      class="w-[50px] h-[50px]"
                      @update="
                        (img: string) => {
                          baseForm.TitleImg = img;
                        }
                      "
                    >
                      <avatar :size="50" :src="baseForm.TitleImg" noClick />
                    </upload-img>
                  </div>
                </li> -->
                <li class="border-bottom flex">
                  <BasisLabel content="群主聊天室内显示的头像">房间头像</BasisLabel>
                  <div class="flex-1 w-0 flex justify-center p-[8px]">
                    <upload-img
                      class="w-[50px] h-[50px]"
                      @update="
                        (img: string) => {
                          baseForm.SysImg = img;
                        }
                      "
                    >
                      <avatar :size="50" :src="baseForm.SysImg" noClick />
                    </upload-img>
                  </div>
                </li>
                <li class="border-bottom flex">
                  <BasisLabel content="群主房间显示的名字(会员不会看到该名字)">房间名字</BasisLabel>
                  <div class="content !py-[3px]">
                    <el-input class="!w-full" v-model="baseForm.RoomNickname" />
                  </div>
                </li>
                <li class="border-bottom flex">
                  <BasisLabel content="聊天室内会员看到的群主昵称">聊天昵称</BasisLabel>
                  <div class="content !py-[3px]">
                    <el-input v-model="baseForm.ChatNickname" />
                  </div>
                </li>
                <li class="border-bottom flex">
                  <BasisLabel content="系统消息中显示金额最低值"
                    >系统消息中显示金额最低值</BasisLabel
                  >
                  <div class="content !py-[3px]">
                    <el-input type="number" v-model="baseForm.SysMinPrice" />
                  </div>
                </li>
                <li class="border-bottom flex">
                  <BasisLabel
                    content="设置后将不会发送分数低于设置的值的会员积分，比如设置为100，那么结算后如果会员的积分低于100，则不会出现在结算后的积分核对账单中(设置0则不限制)"
                  >
                    低分数不发账单消息
                  </BasisLabel>
                  <div class="content !py-[3px]">
                    <el-input type="number" v-model="baseForm.LowBalanceNobill" />
                  </div>
                </li>
                <li class="border-bottom flex">
                  <BasisLabel
                    content="例如设置100，会员每次上分都必须大于或等于100才可以提交上分，设置0则不限制会员最少上分金额。"
                  >
                    会员最低上分金额
                  </BasisLabel>
                  <div class="content !py-[3px]">
                    <el-input type="number" v-model="baseForm.MiniApply" />
                  </div>
                </li>
                <li class="border-bottom flex">
                  <BasisLabel
                    content="例如设置100，会员每次下分都必须大于或等于100才可以提交下分，设置0则不限制会员最少下分金额。"
                  >
                    会员最低下分金额
                  </BasisLabel>
                  <div class="content !py-[3px]">
                    <el-input type="number" v-model="baseForm.MiniDown" />
                  </div>
                </li>
                <li class="border-bottom flex">
                  <BasisLabel
                    content="用于限制会员下分时的下分密码可错次数，若会员下分时输入的密码错误次数超过系统设置的次数，系统则会限制该会员来确保会员的财产安全。强烈建议所有会员都启用下分密码(下分密码启用路径：会员个人中心-安全设置-下分密码)"
                  >
                    下分密码可错次数
                  </BasisLabel>
                  <div class="content !py-[3px]">
                    <el-input type="number" v-model="baseForm.WithPwdErrCount" />
                  </div>
                </li>
                <li class="border-bottom flex">
                  <BasisLabel
                    content="设置后单注下注金额大于或等于预警值将会通知群主(设置0则不预警)"
                  >
                    单次下注预警金额值
                  </BasisLabel>
                  <div class="content !py-[3px]">
                    <el-input type="number" v-model="baseForm.SingleBetNotice" />
                  </div>
                </li>
                <li class="border-bottom flex">
                  <BasisLabel
                    content="设置后会员单注中奖金额大于或等于预警值将会通知群主(设置0则不预警)"
                  >
                    大额中奖预警值
                  </BasisLabel>
                  <div class="content !py-[3px]">
                    <el-input type="number" v-model="baseForm.SingleWinNotice" />
                  </div>
                </li>
              </ul>
            </article>
            <article class="border">
              <ul>
                <li class="border-bottom flex">
                  <BasisLabel content="开启后进入房间将需要管理员审核">入群审核</BasisLabel>
                  <div class="content">
                    <el-switch
                      size="large"
                      inline-prompt
                      v-model="baseForm.IncomeExamine"
                      active-text="开启"
                      inactive-text="关闭"
                      :active-value="1"
                      :inactive-value="0"
                    />
                  </div>
                </li>
                <li class="border-bottom flex">
                  <BasisLabel content="龙虎和结算方式">龙虎和结算方式</BasisLabel>
                  <div class="content">
                    <el-switch
                      size="large"
                      inline-prompt
                      v-model="baseForm.LhhStatus"
                      active-text="通杀"
                      inactive-text="返本"
                      :active-value="1"
                      :inactive-value="0"
                    />
                  </div>
                </li>
                <li class="border-bottom flex">
                  <BasisLabel content="开启后房间将显示自助回水明细">自助回水</BasisLabel>
                  <div class="content">
                    <el-switch
                      size="large"
                      inline-prompt
                      v-model="baseForm.Backwater"
                      active-text="开启"
                      inactive-text="关闭"
                      :active-value="1"
                      :inactive-value="0"
                    />
                  </div>
                </li>
                <li class="border-bottom flex">
                  <BasisLabel content="显示游戏赔率">游戏赔率</BasisLabel>
                  <div class="content">
                    <el-switch
                      size="large"
                      inline-prompt
                      v-model="baseForm.PlStatus"
                      active-text="显示"
                      inactive-text="隐藏"
                      :active-value="1"
                      :inactive-value="0"
                    />
                  </div>
                </li>
                <li class="border-bottom flex">
                  <BasisLabel content="会员流水">会员流水</BasisLabel>
                  <div class="content">
                    <el-switch
                      size="large"
                      inline-prompt
                      v-model="baseForm.LsStatus"
                      active-text="开启"
                      inactive-text="关闭"
                      :active-value="1"
                      :inactive-value="0"
                    />
                  </div>
                </li>
                <li class="border-bottom flex">
                  <BasisLabel content="开启网投键盘">网投键盘</BasisLabel>
                  <div class="content">
                    <el-switch
                      size="large"
                      inline-prompt
                      v-model="baseForm.JpStatus"
                      active-text="开启"
                      inactive-text="关闭"
                      :active-value="1"
                      :inactive-value="0"
                    />
                  </div>
                </li>
                <li class="border-bottom flex">
                  <BasisLabel content="下注成功回复消息">下注成功回复消息</BasisLabel>
                  <div class="content">
                    <el-switch
                      size="large"
                      inline-prompt
                      v-model="baseForm.XzStatus"
                      active-text="开启"
                      inactive-text="关闭"
                      :active-value="1"
                      :inactive-value="0"
                    />
                  </div>
                </li>

                <li class="border-bottom flex">
                  <BasisLabel content="开启公告显示">开启公告显示</BasisLabel>
                  <div class="content">
                    <el-switch
                      size="large"
                      inline-prompt
                      v-model="baseForm.FjggStatus"
                      active-text="开启"
                      inactive-text="关闭"
                      :active-value="1"
                      :inactive-value="0"
                    />
                  </div>
                </li>
                <li class="border-bottom flex">
                  <BasisLabel
                    content="开启后玩家下注将简化显示，点击可查看详情，关闭后将直接显示会员所有下注内容"
                  >
                    订单内容简化显示
                  </BasisLabel>
                  <div class="content">
                    <el-switch
                      size="large"
                      inline-prompt
                      v-model="baseForm.SimplifyOrder"
                      active-text="开启"
                      inactive-text="关闭"
                      :active-value="1"
                      :inactive-value="0"
                    />
                  </div>
                </li>
                <li class="border-bottom flex">
                  <BasisLabel
                    content="开启后玩家发送了错误的下注指令系统也会回复，关闭后则不会回复错误指令"
                  >
                    回复非订单指令消息
                  </BasisLabel>
                  <div class="content">
                    <el-switch
                      size="large"
                      inline-prompt
                      v-model="baseForm.MustReply"
                      active-text="开启"
                      inactive-text="关闭"
                      :active-value="1"
                      :inactive-value="0"
                    />
                  </div>
                </li>
              </ul>
            </article>
            <article class="border">
              <ul>
                <li class="border-bottom flex">
                  <BasisLabel content="开启后结算消息会发送当期的开奖图，关闭则不发">
                    发送当期开奖图
                  </BasisLabel>
                  <div class="content">
                    <el-switch
                      size="large"
                      inline-prompt
                      v-model="baseForm.ShowPic1"
                      active-text="开启"
                      inactive-text="关闭"
                      :active-value="1"
                      :inactive-value="0"
                    />
                  </div>
                </li>
                <li class="border-bottom flex">
                  <BasisLabel content="开启后结算消息会发送近20期的开奖图样式一，关闭则不发">
                    发送近期开奖图一
                  </BasisLabel>
                  <div class="content">
                    <el-switch
                      size="large"
                      inline-prompt
                      v-model="baseForm.ShowPic2"
                      active-text="开启"
                      inactive-text="关闭"
                      :active-value="1"
                      :inactive-value="0"
                    />
                  </div>
                </li>
                <li class="border-bottom flex">
                  <BasisLabel content="允许重复上下分">允许重复上下分</BasisLabel>
                  <div class="content">
                    <el-switch
                      size="large"
                      inline-prompt
                      v-model="baseForm.SxfStatus"
                      active-text="开启"
                      inactive-text="关闭"
                      :active-value="1"
                      :inactive-value="0"
                    />
                  </div>
                </li>
                <li class="border-bottom flex">
                  <BasisLabel content="开启后房间将显示流水明细">显示流水</BasisLabel>
                  <div class="content">
                    <el-switch
                      size="large"
                      inline-prompt
                      v-model="baseForm.ShowWater"
                      active-text="开启"
                      inactive-text="关闭"
                      :active-value="1"
                      :inactive-value="0"
                    />
                  </div>
                </li>
                <li class="border-bottom flex">
                  <BasisLabel
                    content="禁止后会员将只能从下注键盘中选取发送内容，允许后会员可以使用系统键盘发送任意消息"
                  >
                    群内闲聊
                  </BasisLabel>
                  <div class="content">
                    <el-switch
                      size="large"
                      inline-prompt
                      v-model="baseForm.GroupChat"
                      active-text="开启"
                      inactive-text="关闭"
                      :active-value="1"
                      :inactive-value="0"
                    />
                  </div>
                </li>
                <li class="border-bottom flex">
                  <BasisLabel content="关闭显示后，不显示下注详情弹窗">下注弹窗</BasisLabel>
                  <div class="content">
                    <el-switch
                      size="large"
                      inline-prompt
                      v-model="baseForm.BetPop"
                      active-text="开启"
                      inactive-text="关闭"
                      :active-value="1"
                      :inactive-value="0"
                    />
                  </div>
                </li>
                <li class="border-bottom flex">
                  <BasisLabel
                    content="关闭显示后，代理身份的会员将无法查看代理报表中的：旗下流水、会员流水、返佣比例"
                  >
                    代理报表下线流水详情
                  </BasisLabel>
                  <div class="content">
                    <el-switch
                      size="large"
                      inline-prompt
                      v-model="baseForm.DlbbStatus"
                      active-text="开启"
                      inactive-text="关闭"
                      :active-value="1"
                      :inactive-value="0"
                    />
                  </div>
                </li>
                <li class="border-bottom flex">
                  <BasisLabel content="开启后会员可以在聊天室中跟投其他玩家的下注订单">
                    是否开启跟投功能
                  </BasisLabel>
                  <div class="content">
                    <el-switch
                      size="large"
                      inline-prompt
                      v-model="baseForm.ShowFllow"
                      active-text="开启"
                      inactive-text="关闭"
                      :active-value="1"
                      :inactive-value="0"
                    />
                  </div>
                </li>
                <li class="border-bottom flex">
                  <BasisLabel content="设置公告后玩家进入房间，可以在游戏大厅顶部看到滚动公告内容">
                    房间公告
                  </BasisLabel>
                  <div class="content">
                    <el-input v-model="baseForm.RoomAnnou" type="textarea" :rows="4" />
                  </div>
                </li>
              </ul>
            </article>
          </section>
          <div class="flex justify-between items-center mt-[15px]">
            <div></div>
            <el-button
              v-if="premsStore.isEditBasisSetting"
              type="primary"
              :disabled="state.loading"
              :loading="state.loading"
              @click.stop="handleSubmit"
            >
              保存设置
            </el-button>
          </div>
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="收款方式" name="method">
        <section class="max-w-[600px] h-full overflow-hidden flex flex-col">
          <div class="flex items-center py-[10px]">
            <div class="w-[110px] text-[14px]">收款方式</div>
            <div>
              <el-radio-group v-model="state.payType">
                <el-radio :value="item.value" :key="i" v-for="(item, i) in bankTypeList">
                  {{ item.name }}
                </el-radio>
              </el-radio-group>
            </div>
          </div>
          <el-scrollbar always class="flex-1 overflow-hidden text-[14px]">
            <template v-if="state.payType == 1">
              <div class="flex items-center py-[10px]">
                <div class="w-[110px]">房间微信</div>
                <div class="flex-1 w-0">
                  <el-input v-model="wechat.BankNumber"></el-input>
                </div>
              </div>
              <div class="flex items-center py-[10px]">
                <div class="w-[110px]">房间QQ</div>
                <div class="flex-1 w-0">
                  <el-input v-model="wechat.Qq"></el-input>
                </div>
              </div>
              <div class="flex items-center py-[10px]">
                <div class="w-[110px]">微信收款码</div>
                <div class="flex-1 w-0">
                  <upload-img
                    class="w-[100px] h-[100px]"
                    @update="
                      (img: string) => {
                        wechat.QrCode = img;
                      }
                    "
                  >
                    <avatar upload :size="100" :src="wechat.QrCode" noClick />
                  </upload-img>
                </div>
              </div>
            </template>
            <template v-if="state.payType == 2">
              <div class="flex items-center py-[10px]">
                <div class="w-[110px]">支付宝账号</div>
                <div class="flex-1 w-0">
                  <el-input v-model="alipay.BankNumber"></el-input>
                </div>
              </div>
              <div class="flex items-center py-[10px]">
                <div class="w-[110px]">支付宝姓名</div>
                <div class="flex-1 w-0">
                  <el-input v-model="alipay.BankUsername"></el-input>
                </div>
              </div>
              <div class="flex items-center py-[10px]">
                <div class="w-[110px]">支付宝收款码</div>
                <div class="flex-1 w-0">
                  <upload-img
                    class="w-[100px] h-[100px]"
                    @update="
                      (img: string) => {
                        if (alipay) {
                          alipay.QrCode = img;
                        }
                      }
                    "
                  >
                    <avatar upload :size="100" :src="alipay.QrCode" noClick />
                  </upload-img>
                </div>
              </div>
            </template>
            <template v-if="state.payType == 3">
              <div class="flex items-center py-[10px]">
                <div class="w-[110px]">银行卡姓名</div>
                <div class="flex-1 w-0">
                  <el-input v-model="bank.BankUsername" />
                </div>
              </div>
              <div class="flex items-center py-[10px]">
                <div class="w-[110px]">银行卡类型</div>
                <div class="flex-1 w-0">
                  <el-input v-model="bank.BankName" />
                </div>
              </div>
              <div class="flex items-center py-[10px]">
                <div class="w-[110px]">银行卡号</div>
                <div class="flex-1 w-0">
                  <el-input v-model="bank.BankNumber" />
                </div>
              </div>
              <div class="flex items-center py-[10px]">
                <div class="w-[110px]">银行卡开户地址</div>
                <div class="flex-1 w-0">
                  <el-input v-model="bank.BankAddress" />
                </div>
              </div>
            </template>
            <template v-if="state.payType == 4">
              <template v-for="(item, i) in usdt" :key="i">
                <div class="usdt-card mb-[15px]">
                  <div class="close" @click="usdt.splice(i, 1)">×</div>
                  <div class="flex items-center py-[10px]">
                    <div class="w-[110px]">虚拟币名称</div>
                    <div class="flex-1 w-0">
                      <el-select v-model="item.BankName" placeholder="请选择">
                        <el-option
                          v-for="item in usdtOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </div>
                  </div>
                  <div class="flex items-center py-[10px]">
                    <div class="w-[110px]">虚拟币地址</div>
                    <div class="flex-1 w-0">
                      <el-input v-model="item.BankNumber" />
                    </div>
                  </div>
                  <div class="flex items-center py-[10px]">
                    <div class="w-[110px]">虚拟币二维码</div>
                    <div class="flex-1 w-0">
                      <upload-img
                        class="w-[100px] h-[100px]"
                        @update="
                          (img: string) => {
                            item.QrCode = img;
                          }
                        "
                      >
                        <avatar upload :size="100" :src="item.QrCode" noClick />
                      </upload-img>
                    </div>
                  </div>
                </div>
              </template>
              <div class="add-card" @click="handleAddUsdt">
                <el-icon><Plus /></el-icon>
                <span class="ml-[10px]">添加</span>
              </div>
            </template>
            <div class="flex justify-between items-center">
              <div></div>
              <el-button
                v-if="premsStore.isEditBasisSetting"
                type="primary"
                :disabled="state.loading"
                :loading="state.loading"
                @click.stop="handleAwbSubmit"
              >
                保存设置
              </el-button>
            </div>
          </el-scrollbar>
        </section>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import BasisLabel from "./components/basis-label.vue";
import { storeToRefs } from "pinia";
import { message } from "@/utils/message";
import { useRoomStore } from "@/store/modules/room";
import { reqBasisConfigEdit, reqPaymentMethods, reqPaymentMethodsEdit } from "@/api/setting";
import { cloneDeep } from "lodash-es";
import { usePremsStore } from "@/store/modules/prems";

const roomStore = useRoomStore();
const { roomInfo } = storeToRefs(roomStore);

const state = reactive({
  tabActive: "base",
  payType: 1,
  loading: false
});
const premsStore = usePremsStore();
const baseForm = reactive<Partial<BasisConfigMo>>({
  SysImg: "",
  RoomNickname: "",
  ChatNickname: "",
  SysMinPrice: 1,
  IncomeExamine: 0,
  ShowWater: 0,
  Backwater: 0,
  GroupChat: 0,
  BetPop: 0,
  ShowForecast: 0,
  RoomAnnou: "",
  MiniApply: 0, // 会员最低上分
  MiniDown: 0, // 会员最多下分
  WithPwdErrCount: 0, // 下分密码可错次数
  SingleBetNotice: 0, // 单次下注预警金额值
  SingleWinNotice: 0, // 大额中奖预警值

  Status: 1,
  LhhStatus: 1, //  龙虎和结算方式         0返本 1通杀
  PlStatus: 1, //  游戏赔率              0关闭 1开启
  LsStatus: 1, // 会员流水              0关闭 1开启
  JpStatus: 1, // 微投键盘模式           0关闭 1开启
  XzStatus: 1, // 下注成功回复消息       0关闭 1开启
  SxfStatus: 1, // 允许重复上下分         0关闭 1开启
  DlbbStatus: 1, // 代理报表下线流水详情   0关闭 1开启
  FjggStatus: 1, // 房间公告栏             0关闭 1开启
  LowBalanceNobill: 1, // 低分数不发账单消息
  ShowFllow: 1,
  ShowPic1: 1,
  ShowPic2: 1,
  MustReply: 1, // 回复非订单指令消息0关闭 1回复
  SimplifyOrder: 1 // 订单内容简化显示 0关闭 1开启
});
const usdtOptions = [
  { label: "USDT-ERC20", value: "USDT-ERC20" },
  { label: "USDT-TRC20", value: "USDT-TRC20" }
];
const defaultPaymentData: PaymentMethodMo = {
  BankAddress: "",
  BankName: "",
  BankNumber: "",
  BankType: <1 | 2 | 3 | 4>1,
  BankUsername: "",
  CreatedAt: "",
  Id: 0,
  Qq: "",
  QrCode: "",
  RoomId: 1,
  UpdatedAt: ""
};
const wechat = ref<PaymentMethodMo>({
  ...defaultPaymentData
});
const alipay = ref<PaymentMethodMo>({
  ...defaultPaymentData,
  BankType: 2
});
const bank = ref<PaymentMethodMo>({
  ...defaultPaymentData,
  BankType: 3
});
const usdt = ref<PaymentMethodMo[]>([]);
const bankTypeList = [
  { name: "微信", value: 1 },
  { name: "支付宝", value: 2 },
  { name: "银行卡", value: 3 },
  { name: "虚拟币", value: 4 }
];
const setBasisData = () => {
  if (roomInfo.value) {
    Object.keys(baseForm).forEach(key => {
      const typedKey = key as keyof typeof baseForm;
      if (typedKey in roomInfo.value! && roomInfo.value![typedKey] !== undefined) {
        (baseForm as any)[typedKey] = roomInfo.value![typedKey];
      }
    });
  }
};
const getData = async () => {
  try {
    const res = await reqPaymentMethods();
    if (res.data.length) {
      const wechatData = res.data.find(item => item.BankType === 1)!;
      if (wechatData) {
        wechat.value = wechatData;
      }
      const alipayData = res.data.find(item => item.BankType === 2)!;
      if (alipayData) {
        alipay.value = alipayData;
      }
      const bankData = res.data.find(item => item.BankType === 3)!;
      if (bankData) {
        bank.value = bankData;
      }
      usdt.value = res.data.filter(item => item.BankType === 4);
    }
  } catch (error) {
    console.log(error);
  }
};

const handleSubmit = async () => {
  try {
    state.loading = true;
    await reqBasisConfigEdit({
      ...baseForm,
      SysMinPrice: Number(baseForm.SysMinPrice),
      MiniApply: Number(baseForm.MiniApply),
      MiniDown: Number(baseForm.MiniDown),
      WithPwdErrCount: Number(baseForm.WithPwdErrCount),
      SingleBetNotice: Number(baseForm.SingleBetNotice),
      SingleWinNotice: Number(baseForm.SingleWinNotice),
      LowBalanceNobill: Number(baseForm.LowBalanceNobill)
    });
    message.success("更新成功");
    roomStore.actionRoomInfo();
    state.loading = false;
  } catch (error) {
    state.loading = false;
    console.log(error);
  }
};

const getParams = (obj: PaymentMethodMo) => {
  return {
    BankName: obj.BankName,
    BankNumber: obj.BankNumber,
    BankUsername: obj.BankUsername,
    BankAddress: obj.BankAddress,
    Qq: obj.Qq,
    QrCode: obj.QrCode
  };
};

const handleAwbSubmit = async () => {
  try {
    state.loading = true;
    let params = [getParams(defaultPaymentData)];
    if (state.payType == 1) {
      params = [cloneDeep(getParams(wechat.value))];
    }
    if (state.payType == 2) {
      params = [cloneDeep(getParams(alipay.value))];
    }
    if (state.payType == 3) {
      params = [cloneDeep(getParams(bank.value))];
    }
    if (state.payType == 4) {
      let isAdd = false;
      for (let i = 0; i < usdt.value.length; i++) {
        if (!usdt.value[i].BankName || !usdt.value[i].BankNumber) {
          isAdd = true;
          break;
        }
      }
      if (isAdd) {
        message.warning("请填写完整虚拟币信息");
        state.loading = false;
        return;
      }
      params = usdt.value.map(item => getParams(item));
    }
    await reqPaymentMethodsEdit({
      BankType: state.payType,
      BankInfo: params
    });
    message.success("更新成功");
    roomStore.actionRoomInfo().then(() => {
      setBasisData();
    });
    getData();
    state.loading = false;
  } catch (error) {
    state.loading = false;
    console.log(error);
  }
};

const handleAddUsdt = () => {
  let isAdd = false;
  for (let i = 0; i < usdt.value.length; i++) {
    if (!usdt.value[i].BankName || !usdt.value[i].BankNumber) {
      isAdd = true;
      break;
    }
  }
  if (isAdd) {
    message.warning("请填写完整虚拟币信息");
    return;
  }
  usdt.value.push({
    ...defaultPaymentData,
    BankType: 4
  });
};
onMounted(() => {
  setBasisData();
  getData();
});
</script>
<style scoped>
.label {
  @apply flex-1 p-[6px] items-center flex;
  border-right: 1px solid #e4e7ed;
}
.content {
  @apply flex-1 p-[6px] py-[7px] items-center justify-center flex;
}
.rounded-text {
  @apply text-[16px] text-[#4E5969] flex items-center justify-center;
  @apply w-[28px] h-[28px] rounded-[28px] bg-[#E8F3FF];
}
.rounded-text.active {
  @apply !bg-[var(--el-color-primary)] text-[#fff];
}
</style>
<style lang="scss" scoped>
:deep() {
  .el-input,
  .el-textarea,
  .el-select {
    --el-input-bg-color: #f9f9f9;
    --el-fill-color-blank: #f9f9f9;
  }
  .basis-tabs {
    flex-grow: 1;
    height: 0;
    overflow: hidden;
    .el-tab-pane {
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
    .el-tabs__item {
      padding: 0 10px !important;
      width: 100px;
      font-size: 15px;
    }
  }
}
.usdt-card {
  padding: 20px;
  border: 1.5px dashed #ddd;
  border-radius: 8px;
  position: relative;
  .close {
    font-size: 26px;
    position: absolute;
    top: -5px;
    right: 10px;
    cursor: pointer;
    color: #999;
  }
}
.add-card {
  padding: 10px;
  border: 1.5px dashed #ddd;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #666;
  margin-bottom: 15px;
  cursor: pointer;
}
</style>
